<#-- @ftlvariable name="entity" type="com.xci.edu.core.entity.EduValidateQuestion" -->
<#include "/sys/_layout.ftl">
<!doctype html>
<html>
<head>
    <@pageHeader/>
    <style>
        .all_num {
            width: 100%;
            /*定义元素为弹性盒子*/
            display: flex;
            flex-wrap: wrap-reverse;
            flex-direction: row;
            flex-flow: row wrap;
            justify-content: space-between;
            align-content: center;
            align-items: center;
            padding-top: 5%;
            padding-left: 20%;
            padding-right: 20%;
        }
    </style>
</head>
<body>
<@pageLoading/>
<div class="jxpanel winpanel" data-fit="true">
    <h4 align="center">
        学习验证剩余<span id="timer"></span>
    </h4>

    <div id="validateData">
    </div>

    <div class="panel-footer text-right jxform">
        <div style="float: left">
            <i class="icon-bulb"></i>温馨提示：只有通过验证，系统才开始记录您的学时！
        </div>
        <button class="btn btn-default" type="button" onclick="editForm.cancel()">
            <i class="fa fa-sign-in"></i> 关闭
        </button>

    </div>
</div>
<@editFormPageFooter/>
<script>

    //region 倒计时
    var oBox = document.getElementById('timer');
    var maxtime = 60;
    function CountDown() {
        if (maxtime >= 0) {
            minutes = Math.floor(maxtime / 60);
            seconds = Math.floor(maxtime % 60);
            msg = seconds + "秒";
            oBox.innerHTML = msg;
            --maxtime;
        } else {
            clearInterval(timer);
            alert("时间到，此次学习时间不做记录!");
            editForm.cancel();
        }
    }

    timer = setInterval("CountDown()", 1000);

    function answer(s) {
        var answerData =document.getElementById('answerName').value;

        if (s == answerData) {
            alert('成功');
        } else {
            alert('失败');
        }
        // alert(s);
        // jx.dialog({
        //     title: '验证窗体',
        //     url: jx.url('/background/eduValidateQuestion/validate'),
        //     // params: {roleIds: [id]},
        //     width: '80%',
        //     height: '80%'
        // });
    };
    //endregion

    //region后台拼接
    function changetext() {
        // var srerchstr = $("#serchText").val();
        $.ajax({
            url: '/background/eduValidateQuestion/validateData',
            type: 'GET',
            async: true,
            data: {
            },
            timeout: 3000,
            beforeSend: function (xhr) {
            },
            success: function (data, textStatus, jqXHR) {
                // console.log(data);
                $("#validateData").html(data);
                drawPic();
            },
            error: function (xhr, textStatus) {
                console.log(xhr);
            },
            complete: function () {
                //console.log("complete");
            }
        })
    }

    //endregion

    //region 生成验证图片

    /**生成一个随机数**/
    function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min);
    }

    /**生成一个随机色**/
    function randomColor(min, max) {
        var r = randomNum(min, max);
        var g = randomNum(min, max);
        var b = randomNum(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    /**绘制验证码图片**/
    function drawPic() {
        var canvas = document.getElementById("canvas");
        var width = 450;
        var height = 53;

        canvas.width=width;
        canvas.height=height;
        // debugger
        var textData =document.getElementById('qusetName').value;

        //获取该canvas的2D绘图环境
        var code = "";
        if (canvas != null) {
            var ctx = canvas.getContext('2d');
            ctx.textBaseline = 'bottom';
            /**绘制背景色**/
            ctx.fillStyle = randomColor(180, 240);
            //颜色若太深可能导致看不清
            ctx.fillRect(0, 0, width, height);
            /**绘制文字**/
            // var str = 'ABCEFGHJKLMNPQRSTWXY123456789';

            for (var i = 1; i <= textData.length; i++) {
                var txt = textData[i - 1];
                code = code + txt;
                ctx.fillStyle = randomColor(50, 100);
                //随机生成字体颜色
                ctx.font = randomNum(15, 30) + 'px SimHei';
                //随机生成字体大小
                var x = 10 + i * 25;
                var y = randomNum(30, 35);
                var deg = randomNum(-45, 45);
                //修改坐标原点和旋转角度
                ctx.translate(x, y);
                ctx.rotate(deg * Math.PI / 180);
                ctx.fillText(txt, 0, 0);
                //恢复坐标原点和旋转角度
                ctx.rotate(-deg * Math.PI / 180);
                ctx.translate(-x, -y);
            }

            /**绘制干扰线**/
            for (var i = 0; i < 3; i++) {
                ctx.strokeStyle = randomColor(40, 180);
                ctx.beginPath();
                ctx.moveTo(randomNum(0, width / 2), randomNum(0, height / 2));
                ctx.lineTo(randomNum(0, width / 2), randomNum(0, height));
                ctx.stroke();
            }
            /**绘制干扰点**/
            for (var i = 0; i < 50; i++) {
                ctx.fillStyle = randomColor(255);
                ctx.beginPath();
                ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
                ctx.fill();
            }
        }
        return code;
    }
    //初始化验证码
    changetext();

    // debugger
    // var reflashCode = document.getElementById("validateData");
    // if (reflashCode != null) {
    //     debugger
    //     // changetext();
    //     // document.getElementById("reflashCode").onclick = function (e) {
    //     //     debugger
    //     //     e.preventDefault();
    //     //     verCode = drawPic();
    //     // }
    // }
    //endregion

</script>

</body>
</html>
